<template>
	<div class="section">
		<div class="section-title">
			<div class="section-title_left">
				<iv-icon class="section-title_left-icon" :type="icon" size="28"></iv-icon>
				<span class="section-title_left-title">{{ $t('system.menu.' + main_title_key) }}</span>
				<span class="section-title_left-line"></span>
				<span class="section-title_left-subtitle">{{ $t('system.menu.' + sub_title_key) }}</span>
				<span class="section-title_left-more">
					<router-link v-if="tip.show" :to="tip.href">
						{{ $t('system.btn.more') }}
						<iv-icon type="arrow-right-b"></iv-icon>
					</router-link>
				</span>
			</div>
			<div class="section-title_right"><slot name="section-title-menu"></slot></div>
		</div>
		<div class="section-content">
			<slot name="section-content-item"></slot>
		</div>	
	</div>
</template>

<script>
export default {
	props: {
		icon: {
			type: String,
			default: 'ios-add-circle-outline'
		},
		main_title_key: {
			type: String,
			default: 'default'
		},
		sub_title_key: {
			type: String,
			default: 'default'
		},
		tip: {
			type: Object,
			default: () => [
				{
					show: {
						type: Boolean,
						default: false
					},
					href: {
						type: String,
						default: '/'
					}
				}
			]
		}
	}
};
</script>

<style lang="scss" scoped>
.section {
	&-title {
		display: flex;
		align-items: center;
		padding: 20px 0;
		height: $heading-link-padding-top;
		line-height: 50px;
		@media only screen and (max-width: $responsive-sm) {
			height: px2rem(70px);
			padding: px2rem(10px) 0;
		}
	
		&_left {
			&-icon {
				display: inline-block;
				vertical-align: middle;
				width: 30px;
				height: 30px;
			}
			&-title {
				display: inline-block;
				vertical-align: middle;
				font-size: 22px;
				padding: 0 10px;
			}
			&-line {
				display: inline-block;
				vertical-align: middle;
				width: 1px;
				height: 20px;
				background-color: $default-sectionTitle-line-color;
			}
			&-subtitle {
				display: inline-block;
				vertical-align: middle;
				font-size: 18px;
				padding-left: 10px;
			}
			&-more {
				display: inline-block;
				vertical-align: middle;
				font-size: 14px;
				padding-left: 10px;
				a {
					color: $color-main-primary;
					font-weight: 500;
					cursor: pointer;
				}
			}
		}
		
		&_right {
			height: 100%;
			margin-left: auto;
			@media only screen and (max-width: $responsive-sm) {
				display: none;
			}
		}
	}
	
	&-content {
		
	}
}
</style>
